<template>
	<view class="container">
		<view class="productItem" v-for="(productVo,index) in productVoList" @click="seeProductDetail(productVo)">
			<u--image v-if="productVo.picList!=null&&productVo.picList.length>0" :showLoading="true"
				:src="urlConstruct(productVo.picList[0].address)" width="200rpx" height="200rpx" radius="10"
				mode="aspectFill" :fade="true" duration="450">
				<view slot="error" style="font-size: 24rpx;">加载失败</view>
			</u--image>
			<view style="margin: 10rpx;"></view>
			<view class="productMessage">
				<view>
					<view class="productTitle">{{productVo.name}}</view>
					<view class="price">¥<text class="number">{{productVo.price}}</text></view>
				</view>
				<view style="display: flex;align-items: center;">
					<u--image :src="urlConstruct(productVo.avatar)" width="20" height="20" shape="circle"></u--image>
					<view style="width: 10px;"></view>
					<view> {{productVo.nickname}}</view>
				</view>
			</view>
		</view>
		<view v-if="!productVoList || productVoList.length==0">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" texColor="#ffffff" iconSize="160"
				iconColor="#D7DEEB" text="当前收藏夹为空" textColor="#D7DEEB" textSize="18" marginTop="30">
			</u-empty>
		</view>

	</view>
</template>

<script>
	import {
		listProductVo
	} from "@/api/market/product.js";
	import {
		picUrlConstruct
	} from "@/utils/picUrlConstruct.js";


	export default {
		data() {
			return {
				productVoList: [],
				page: {
					pageNum: 1,
					pageSize: 10
				},
			}
		},
		created() {
			// this.listProductVo();

		},
		onShow: function() {
			this.listProductVo();
		},
		methods: {
			urlConstruct(url) {
				return picUrlConstruct(url);
			},
			listProductVo() {
				listProductVo({
					isSearchStar: true
				}, this.page).then(res => {
					console.log("listProductVo:" + JSON.stringify(res))
					this.productVoList = res.data.pageMes.rows;
				})
			},
			/**
			 * 查看商品的详情
			 */
			seeProductDetail(productVo) {
				// console.log("productVo:"+JSON.stringify(productVo))
				uni.navigateTo({
					url: "/pages/product/detail?productVo=" + encodeURIComponent(JSON.stringify(productVo))
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;

		.productItem {
			display: flex;
			margin-bottom: 30rpx;

			.productMessage {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.productTitle {
					font-weight: 500;
					margin-bottom: 10rpx;
				}

				.price {
					color: #F84442;
					// font-weight: bold;

					.number {
						font-size: 20px;
					}
				}
			}

		}
	}
</style>